import {useCallback} from 'react'
import {Form} from 'antd'
import { CloseOutlined } from '@ant-design/icons';
import { getMessage } from '@inbiz/react';
import type {  FunctionComponent,} from 'react'
import type { SchemaOption } from '../../../../designer/conditionsSchema';

const formlayOut = {
  labelCol: { span: 9 },
  wrapperCol: {span: 16 }
}

const ItemWithRemoveButton: FunctionComponent<{
  field: SchemaOption;
  onRemoveHandle: (item: SchemaOption) => void;
}> = (props) => {
  const { children, field, onRemoveHandle } = props;

  const onRemove = useCallback(() => {
    onRemoveHandle(field);
  }, [onRemoveHandle, field]);

  return (
    <Form.Item label={getMessage(field.label)} >
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Form.Item initialValue={field.value} name={field.key} style={{ marginBottom: 0, flex: 1 }}>
          {children}
        </Form.Item>
        <span className="remove-button" onClick={onRemove}>
          <CloseOutlined />
        </span>
      </div>
    </Form.Item>
  );
};

export default ItemWithRemoveButton
